<script lang="ts" setup>
import type { PropType } from 'vue'
import { REGEX_HTTP_URL } from '@/libs/validate'
import PreviewImage from '@/components/preview-image/preview-image.vue'

defineProps({
  remark: { type: Object as PropType<{ [x: string]: string }>, required: true },
})
</script>

<template>
  <template v-for="(val, key, index) in remark">
    <view v-if="!['newOrderNotify', 'remark'].includes(key)" :key="index" class="remark-view">
      <text class="remark-view--key">{{ key }}：</text>
      <view v-if="REGEX_HTTP_URL(val)" class="remark-view--image">
        <PreviewImage :images="[val]" height="80" width="100" />
      </view>
      <text v-else class="remark-view--remarkKey"> {{ val }}</text>
    </view>
  </template>
</template>

<style lang="scss" scoped>
@include b(remark-view) {
  padding: 20rpx 40rpx 0 20rpx;
  align-items: center;
  @include m(key) {
    color: #676666;
  }
  @include m(image) {
    margin-bottom: 20rpx;
  }
  @include m(remarkKey) {
    color: #777777;
  }
}
</style>
